<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <h1 id="text">{{ displayedText }}</h1>
  </div>
</template>

<script>

export default {
  props: {
    text: { type: String, default: '基于STM32的高校智能快递柜' },
    speedValue: { type: Number, default: 2 }
  },
  
  data()
  {
    return {
      displayedText: '', // 当前显示的文本
      idx: 1 // 当前显示的字符索引
    }
  },
  computed: {
    speed()
    {
      // 根据 speedValue 计算实际的打字速度
      return 300 / this.speedValue
    }
  },
  mounted()
  {
    this.writeText() // 组件挂载后开始打字效果
  },
  methods: {
    writeText()
    {
      // 更新显示的文本
      this.displayedText = this.text.slice(0, this.idx)

      // 增加字符索引
      this.idx++

      // 如果文本显示完毕，重置索引
      if (this.idx > this.text.length)
      
        this.idx = 1
      

      // 递归调用，实现打字效果
      setTimeout(this.writeText, this.speed)
    }
  },
  watch: {
    // 监听 speedValue 的变化，动态调整打字速度
    speedValue()
    {
      this.speed = 300 / this.speedValue
    }
  }
}
</script>

<style scoped>
/* 可以在这里添加样式 */
#text {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
}
</style>
